<div>
    {% for item in articles -%}
    {% set article = item.article -%}
    <div class="py-6 sm:px-8 hover:bg-gray-100">
        {% if article.path -%}
        <a href="{{ article.path }}">
        {% else -%}
        <a href="/{{ item.issue_slug }}/{{ article.slug }}">
        {% endif -%}
        <div class="flex">
            <img class="zine-thumbnail w-28 h-18 sm:w-40 sm:h-28 object-cover" src="{{ article.cover }}"
                alt="{{ article.title }}" loading="lazy">
            <div class="flex flex-col justify-between ml-4 sm:ml-8 text-base sm:text-lg text-black grow">
                <div class="zine-card-title my-2 font-bold line-clamp-2">{{ article.title }}</div>
                <div class="relative text-base text-gray-500 flex justify-between items-center">
                    <span class="zine-card-date">{{ article.pub_date }}</span>
                    <span
                        class="zine-diamond mx-4 my-2 before:block before:absolute before:-inset-1 before:-skew-x-6 before:bg-primary relative inline-block">
                        <span class="relative text-main text-xs">{{ item.issue_title }}</span>
                    </span>
                </div>
            </div>
        </div>
        </a>
    </div>
    {% if not loop.last -%}
    <hr>
    {% endif -%}
    {% endfor -%}
</div>
